<template> 
	<div class="container">
		<div class="title">热销推荐</div>
		<ul>

				<router-link  
				class="item" 
				v-for="(item,index) of recommendList" 
				:key="item.id"
				tag="li"
				:to="'/detail/'+item.id"
				>
					<img :src="item.imgUrl">
					<div class="right">
						<p class="item-title">{{item.title}}</p>
						<p class="item-desc">{{item.desc}}</p>
						<p><span class="item-price">￥{{item.price}}</span>起</p>
					</div>
				</router-link >
	
			
			
		</ul>
	</div>
</template> 

<script> 
	export default { 
		data () { 
			return { 
			}; 
		}, 
		props:{
			recommendList:Array
		},

		methods: { 

		},
		mounted(){

		}


	}; 
</script> 

<style scoped> 
.container{
	margin-top: 30px;
}
ul{
	list-style-type: none;
}
.title{
	font-weight: bold;
	font-size: 20px;
	margin: 5px ;
}
.item{
	display: flex;
	margin: 10px;
}
.item-title{
	font-size: 18px;
	font-weight: bold;
}
.item img{
	width: 110px;
	height: 110px;
}
.item-desc{
	color: #333;
	font-size: 16px;
}
.item-price{
	color: orange;
	font-weight: bold;
	font-size: 30px;
}
.right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 10px;
}
</style> 